<template>
  <div class="setRole">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="672px" @close="closeDialog()">
      <el-form ref="formData" :model="formData" :rules="rules" label-width="100px" style="padding: 0px 40px">
        <el-form-item label="角色名称：" prop="roleName">
          <el-input
            v-model="formData.roleName"
            class="show-word-limit"
            maxlength="20"
            show-word-limit
            placeholder="请输入角色名称"
          />
        </el-form-item>
        <el-form-item label="角色编码：" prop="roleCode">
          <el-input
            v-model="formData.roleCode"
            class="show-word-limit"
            maxlength="50"
            show-word-limit
            placeholder="请输入角色编码"
          />
        </el-form-item>
        <el-form-item label="角色描述：">
          <el-input
            v-model="formData.remark"
            :autosize="{ minRows: 2 }"
            class="show-word-limit"
            placeholder="请输入角色描述"
            type="textarea"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态：">
              <el-radio-group v-model="formData.enable">
                <el-radio :label="0">禁用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="系统角色：">
              <el-radio-group v-model="formData.isSystem">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserRole } from '@/api/system-management'
export default {
  name: 'SetRole',
  data() {
    return {
      dialogTitle: '角色',
      formDialogType: '',
      dialogVisible: false,
      nowRole: {},
      // 表单数据
      formData: {
        roleId: null,
        roleName: '',
        remark: '',
        isSystem: 0,
        enable: 1
      },
      rules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
      },
      // 树data
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted() {
    // getRightTree().then((res) => {
    //   this.treeList = res.data
    // })
  },
  methods: {
    // 点击新增或者编辑
    is(type, data) {
      this.dialogVisible = true
      if (type === 'add') {
        this.dialogTitle = '新增角色'
      } else {
        this.dialogTitle = '编辑角色'
        this.nowRole = data
        getUserRole(data.roleId).then((res) => {
          this.formData = res.data
        })
      }
      this.formDialogType = type
    },
    closeDialog() {
      this.$emit('closeForm')
      this.dialogVisible = false
    },
    // 提交
    submitForm() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          let refreshMenu =
            this.formDialogType === 'add'
              ? false
              : this.nowRole.enable !== this.formData.enable &&
                this.$store.state.user.roles.includes(this.formData.id)
          this.$emit('submitForm', this.formDialogType, this.formData, refreshMenu)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.setRole {
  height: 99%;
  /deep/label {
    font-weight: 500;
  }
}
</style>
